<template>
    <div class="container" >
  
      <el-select
        v-model="sex"
        value-key="id"
        placeholder="Select"
        style="width: 240px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </template>
  <script>
    export default {
      name: '',
      data: function(){
        return {
          sex:'2',
          options : [
              {
                  value: '1',
                  label: '男',
              },
              {
                  value: '2',
                  label: '女',
              }
          ],
        }
      },
      methods:{
      },
      updated(){
          alert(this.sex);
      }
    }
  </script>
  <style>
      html,
      body, 
      #app{
          height: 100%;
      }
  </style>
  <style scoped>
      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
      }
      .tr{
          width: 200px;
          flex-basis: 50px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          background-color: beige;
          align-items: center;
      }
      .second{
          background-color: aqua;
      }
  </style>